<script setup lang="ts">
import {ref} from 'vue'

defineProps(['title'])
defineEmits(['enlarge-text'])

const fs = ref(1)

function enlarge() {
  fs.value += .1
}
</script>

<template>
  <div class="blog-post" :style="{fontSize:fs+'em'}">
    <h4>{{ title }}</h4>
    <button @click="$emit('enlarge-text')">Enlarge text</button>

    <button @click="enlarge">Enlarge inner text</button>
  </div>
</template>
